<template>
  <gui-page ref="guiPage" :fullPage="true" :customHeader="true">
    <template v-slot:gHeader>
      <view class="header">
        <image
          class="header-back"
          src="/static/activity/fanhui btn@2x.png"
          mode="aspectFit"
          @click="goBack"
        ></image>
        <text class="header-title">获赞</text>
        <view style="width: 50rpx"></view>
      </view>
    </template>
    <template v-slot:gBody>
      <view style="height: 88rpx"></view>
      <view class="gui-bg-white gui-dark-bg-level-3">
        <!--<view-->
        <!--  id="header"-->
        <!--  class="search-fixed-top gui-bg-white"-->
        <!--  style="padding: 10rpx 30rpx"-->
        <!--&gt;-->
        <!--  <gui-switch-navigation-->
        <!--    :activeLineClass="['gui-xhs-red']"-->
        <!--    :isCenter="true"-->
        <!--    activeDirection="center"-->
        <!--    textAlign="center"-->
        <!--    :items="tabs"-->
        <!--    :size="150"-->
        <!--    :currentIndex="currentIndex"-->
        <!--    @change="navchange"-->
        <!--  ></gui-switch-navigation>-->
        <!--</view>-->

        <!--<view style="height: 88rpx"></view>-->

        <view
          id="content-wrap2"
          style="background-color: #f8f8f8"
          v-if="currentIndex == 0"
        >
          <collectList
            :scPage="scPage"
            :isLikeTab="true"
            :authorId="authorId"
          ></collectList>
        </view>
        <!--<collectList-->
        <!--  v-if="currentIndex == 1"-->
        <!--  :scPage="scPage"-->
        <!--  :authorId="authorId"-->
        <!--&gt;</collectList>-->
      </view>
    </template>
  </gui-page>
</template>
<script>
import collectList from "@/pages/users/com/collectList.vue";
import graceJS from "@/Grace6/js/grace.js";
import commonMixin from "@/mixin/commonMinxin";

export default {
  mixins: [commonMixin],
  components: {
    collectList,
  },
  data() {
    return {
      tabs: [{ id: 1, name: "点赞" }],
      authorId: "",
      friends: [],
      follows: [],
      fans: [],
      // 顶部选项卡标签 选中选项的 索引
      currentIndex: 0,
      swiperHeight: 0,
      user: {},
      starFolderId: null,
      scPage: 1,
    };
  },
  onLoad(e) {
    // this.user = uni.app.getStorage("user");
    e.authorId && (this.authorId = e.authorId);
    e.type && (this.currentIndex = parseInt(e.type));
    uni.setStorageSync("token", e.token);
    uni.setStorageSync("userId", e.authorId);

    this.$nextTick(() => {
      this.getFollowMes();
    });
  },
  onReachBottom: function () {
    this.scPage++;
  },
  mounted: function () {
    var mountedTimer = null;
    if (mountedTimer != null) {
      clearTimeout(mountedTimer);
    }
    mountedTimer = setTimeout(() => {
      // 01. 获取页面主体高度
      graceJS.getRefs("guiPage", this, 0, (ref) => {
        ref.getDomSize("guiPageBody", (e) => {
          this.swiperHeight = e.height - uni.upx2px(110); //导航栏高度
        });
      });
    }, 100);
  },
  methods: {
    goCard(authorId) {
      return uni.app.goCard(authorId);
    },
    navchange: function (index) {
      this.currentIndex = index;
    },
    swiperChange: function (e) {
      var index = e.detail.current;
      this.currentIndex = index;
    },

    getFollowMes() {
      let data = {
        starFolderId: this.starFolderId,
        limit: 6,
        offset: 1,
        authorId: uni.getStorageSync("userId"),
      };
      uni.app.post("/blog/note/getStarNotes", data, "json", "", (res) => {
        console.log(res);
        this.fans = res.data.records;
      });
    },
    goBack() {
      switch (uni.getSystemInfoSync().platform) {
        case "android":
          window.AndroidBridge.backEvent();
          console.log("运行Android上");
          break;
        case "ios":
          window.webkit.messageHandlers.backEvent.postMessage({});
          break;
        default:
          console.log("运行在开发者工具上");
          break;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.search-fixed-top {
  position: fixed;
  z-index: 999;
  left: 0;
  top: 88rpx;
  width: 100%;
}

.header {
  height: 88rpx;
  width: 750rpx;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20rpx;

  .header-back {
    width: 50rpx;
    height: 50rpx;
  }

  .header-title {
    height: 88rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    flex: 1;
    text-align: center;
  }
}
</style>
